import React, { Component } from 'react'
import { Link,Route } from 'react-router-dom'

import Detail from './Detail/Detail'

export default class Message extends Component {

  state={
    messages:[
      {id:'01',msg:'消息1'},
      {id:'02',msg:'消息2'},
      {id:'03',msg:'消息3'}
    ]
  }

  render() {
    const { messages } = this.state
    return (
      <div>
        <ul>
          {
            messages.map(m=>{
              const { id,msg } = m
              return (
                <li key={id}>
                  {/* <Link to={`/home/message/detail/${id}/${msg}`}>{msg}</Link> */}
                  {/* <Link to={`/home/message/detail?id=${id}&msg=${msg}`}>{msg}</Link> */}
                  <Link to={{pathname:'/home/message/detail',state:{id,msg}}}>{msg}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/* params传参 */}
        {/* <Route path="/home/message/detail/:id/:msg" component={Detail}/> */}

        {/* search传参 无需接收参数 */}
        {/* <Route path="/home/message/detail" component={Detail}/> */}

        {/* state传参 无需接收参数 */}
        <Route path="/home/message/detail" component={Detail}/>

      </div>
    )
  }
}
